<template>
	<view class="content mine">
		<view class="header">
			<view class="wid106">
				<image :src="imgUrl+'/static/image/packA/dkdt/打卡.png'"></image>
			</view>
			<view class="flex">
				<view class="wid56">
					<image :src="imgUrl+'/static/image/home/头像.png'"></image>
				</view>
				<view class="flx4">
					<view class="">
						<view class="nickname">
							用户昵称
						</view>
						<view class="xTitle">
							已累计打卡 {{haveClock}} 天
						</view>
					</view>
				</view>
			</view>
			<view class="flx2 marT30 wid80">
				<view class="">
					<view class="value">
						{{info.monthClickNum}}
					</view>
					<view class="label">
						本月打卡
					</view>
				</view>
				<view class="">
					<view class="value">
						{{info.monthClickNum}}
					</view>
					<view class="label">
						连续打卡
					</view>
				</view>
				<!-- <view class="">
					<view class="value">
						28
					</view>
					<view class="label">
						邮币
					</view>
				</view> -->
			</view>
		</view>
		<view class="record">
			<view class="title">
				打卡记录
			</view>
			<view class="box" v-for="(item,index) in list" :key="index">
				<view class="flx2">
					<view class="flex">
						<view class="wid10">
							<image :src="item.imagesUrl"></image>
						</view>
						<view class="name">
							{{item.clockPoint}}
						</view>
					</view>
					<!-- <view class="sum">
						+{{item.points}}分
					</view> -->
				</view>
				<view class="time">
					{{item.clockTime}}
				</view>
				<view class="wid319" v-if="item.imagesUrl">
					<image :src="item.imagesUrl"></image>
				</view>
				<view class="brief">
					{{item.content}}
				</view>
				<view class="flex flx3">
					<view class="type" v-for="(item1,index1) in item.clockTagName" :key="index1">
						{{item1}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getClockRecord,
		getDicts,
		getClickNumStat
	} from '@/api/home.js'
	export default {
		data() {
			return {
				list: [
				],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					userId: JSON.parse(uni.getStorageSync("userInfo")).userId,

				},
				typeData: [],
				haveClock: "",
				info: null
			}
		},
		computed:{
			imgUrl(){
				return this.$imgUrl
			}
		},
		onLoad(params) {
			this.haveClock = params.haveClock
			getDicts('activity_clock_tag').then(res => {
				console.log(res, '字典');

				this.typeData = res.data
			})
			this.list = []
			this.getList()
			this.getClickNum()
		},
		mounted() {

		},
		onPullDownRefresh() {
		
			// 下拉刷新时重置数据
			this.queryParams.pageNum = 1;
			this.list = []
			this.getList()
			

		},
		onReachBottom() {

			if (this.queryParams.pageNum * this.queryParams.pageSize < this.total) {
				this.queryParams.pageNum++
				this.getList()
			}
		},
		methods: {
			// 获取打卡数据
			getClickNum() {

				getClickNumStat({
					userId: JSON.parse(uni.getStorageSync("userInfo")).userId
				}).then(res => {
					console.log(res)
					this.info = res.data
				})
			},

			// 查询列表
			getList() {
				getClockRecord(this.queryParams).then(res => {
					console.log(res, '数据');
					res.rows.forEach(item => {
						item.clockTagName = []
						if (item.clockTag.length > 0) {
							item.clockTagArr = item.clockTag.split(',')
							this.typeData.forEach(item1 => {
								item.clockTagArr.forEach(element => {
									if (element == item1.dictValue) {
										item.clockTagName.push(item1.dictLabel)
									}
								})
							})
						}
						this.list.push(item)
					})
					this.total = res.total
					uni.stopPullDownRefresh(); // 停止下拉刷新动画
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mine {
		.marT30 {
			margin-top: 30px;
		}

		.header {
			width: 100%;
			height: 166px;
			background: linear-gradient(180deg, #C7FEF2 7%, #FFFFFF 56%);
			padding: 14px;
			position: relative;

			.wid106 {
				width: 106px;
				height: 90px;
				position: absolute;
				top: 0;
				right: 20px;

				image {
					width: 100%;
					height: 100%;
					object-fit: fill;
				}
			}

			.wid56 {
				width: 56px;
				height: 56px;
				overflow: hidden;
				margin-right: 14px;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
					object-fit: fill;
				}
			}

			.nickname {
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 700;
				font-size: 16px;
				color: #000000;
			}

			.xTitle {
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 12px;
				color: #6B7280;
				margin-top: 6px;
			}

			.wid80 {
				width: 80%;
				margin: 30px auto 0;

				.value {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 700;
					font-size: 18px;
					color: #00ABA9;
					text-align: center;
				}

				.label {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 12px;
					color: #6B7280;
				}
			}
		}

		.record {
			background: #FFFFFF;
			padding: 14px;
			margin-top: 14px;

			.title {
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 700;
				font-size: 14px;
				color: #000000;
			}

			.box {
				margin-top: 14px;
				background: #F7F7F7;
				border-radius: 7px 7px 7px 7px;
				padding: 16px 14px;

				.wid10 {
					width: 10px;
					height: 14px;

					image {
						width: 100%;
						height: 100%;
						object-fit: fill;
					}
				}

				.name {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 500;
					font-size: 14px;
					color: #000000;
					margin-left: 6px;
				}

				.sum {
					background: #00ABA9;
					border-radius: 9999px 9999px 9999px 9999px;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 11px;
					color: #FFFFFF;
					padding: 2px 6px;
				}

				.time {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 11px;
					color: #6B7280;
					margin: 6px 0 0 18px;
				}

				.wid319 {
					width: 100%;
					height: 168px;
					border-radius: 8px;
					margin-top: 10px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
						object-fit: fill;
					}
				}

				.brief {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 12px;
					color: #4B5563;
					line-height: 18px;
					margin-top: 10px;
				}

				.type {
					background: #EFFFF8;
					border-radius: 9999px 9999px 9999px 9999px;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 11px;
					color: #00ABA9;
					padding: 2px 6px;
					margin-right: 12px;
					margin-top: 10px;
				}
			}
		}
	}
</style>